<template>

<el-scrollbar height="2000px" @scroll="scrolllength">

    <div class="san">
        <div class="fl">
            <van-dropdown-menu active-color="red">
                <van-dropdown-item title="排列方式" v-model="value1" :options="option1" />
                <van-dropdown-item title="是否付费" v-model="value2" :options="option2" />
            </van-dropdown-menu>
        </div>
    </div>

    <contentList :list="trackViews" :isShow=0></contentList>
</el-scrollbar>   
</template>

<script setup lang="ts">
import contentList from '@/components/contentList/index.vue'

const value1 = ref(0);
const value2 = ref('a');
const option1 = [
    { text: '相关度', value: 0 },
    { text: '最多播放', value: 1 },
    { text: '最新上传', value: 2 },
];
const option2 = [
    { text: '全部', value: 'a' },
    { text: '免费', value: 'b' },
    { text: '付费', value: 'c' },
];

//获取数据
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router';
const route = useRoute()
import reqApi from '@/api/search/index'
const trackViews = ref<any[]>([])


let num = ref(1)
const dd = async (shuru: any, number: number) => {
    console.log('222')
    let result = await reqApi.reqTagList4(shuru, 'all', number, 5)
    console.log('dd', result.data);
    // SearchStore.data = result.data
    console.log('SearchStore-qb', result.data)

    if (number === 1) {
        trackViews.value = result.data.trackViews.tracks
    } else {
        trackViews.value = trackViews.value.concat(result.data.albumViews.albums)
    }
    
    // category.value = result.category
}

const scrolllength = (scrolllength: any) => {

if (scrolllength.scrollTop === num.value * 320) {
    num.value++
    dd(route.query.name, num.value)
}
console.log('scrolllength', scrolllength.scrollTop)

}

onMounted(() => {
    dd(route.query.name, num.value)
})

</script>

<style scoped></style>